<template>
  <div class="page-box">
       <div class="page-search">
           <div>
               <label>工序编码</label>
               <el-input v-model="searchForm.ProcessCode" style="width: 160px;" placeholder="请输入工序编码"></el-input>
           </div>
           <div>
               <label>工序名称</label>
               <el-input v-model="searchForm.ProcessName" style="width: 160px;" placeholder="请输入工序名称"></el-input>
           </div>
            <div>
                <label>是否启用</label>
                <el-select v-model="searchForm.EnableFlag" placeholder="请选择是否启用">
                    <el-option label="是" value="Y"></el-option>
                    <el-option label="否" value="N"></el-option>
                </el-select>
            </div>
           <div>
               <el-button type="primary" @click="search">查询</el-button>
               <el-button @click="reset">重置</el-button>
           </div>
       </div>
       <div class="page-section">


           <!--表单-->
           <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading" row-key="Id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
               <el-table-column  type="selection" width="55"></el-table-column>
               <el-table-column  fixed prop="ProcessCode" label="工序编码" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="ProcessName" label="工序名称" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column  prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                   <template slot-scope="scope">
                       <el-tag type="success" v-if="scope.row.EnableFlag==='Y'">是</el-tag>
                       <el-tag type="warning" v-else>否</el-tag>
                   </template>
               </el-table-column>
               <el-table-column  prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
               <el-table-column   label="操作" :show-overflow-tooltip="true">
                   <template slot-scope="scope">
                       <el-button type="text" @click="Checked(scope.row)">选择</el-button>
                   </template>
               </el-table-column>
           </el-table>
   

           
       </div>

  </div>
</template>
<script>

export default{
   mounted(){
       this.dataBind();
   },
   data(){
       return{

           //搜索字段
           searchForm:{
            ProcessCode:'',
            ProcessName:'',
            EnableFlag:''
           },
           tableData:[],
           isLoading:false,
           

       }
   },
   methods:{
       

       search(){
           this.dataBind();
       },
       reset(){
           this.searchForm.ProcessCode='';
           this.searchForm.ProcessName='';
           this.searchForm.EnableFlag='';
        },
        Checked(model){
            this.$emit('callback',model);
        },

       //获取数据
       dataBind(){
           this.isLoading=true;
           this.$http.get('/api/ProProcess/GetAll',
           {
              params:{
                   ProcessCode:this.searchForm.ProcessCode,
                   ProcessName:this.searchForm.ProcessName,
                   EnableFlag:this.searchForm.EnableFlag
              }
           })
           .then(res=>{
               this.tableData=res.Data;
               this.isLoading=false;
           })
       }
   }
}
</script>
<style scoped>
   
</style>
